<template>
    <div class="courseQuestionBankView">
        <template v-if="exercisesId">
            <CourseContentExerciseContent :exercisesId="exercisesId" :editMode="true"  @submit="submitExercises"/>
        </template>
        <template v-else>
            <!-- 题库列表内容 -->
            <div class="questionBankListContent">
                <!-- 表格 -->
                <div class="questionBankListTable" ref="questionBankListTable">
                    <!-- 表头 -->
                    <div class="tableHeader">
                        <div class="tableColumn">
                            <div class="topicId" @click="tableSortChange('id')">
                                编号
                                <div class="tableSort"
                                    :class="{ 'upward': idSort == tableSort.asc, 'downward': idSort == tableSort.desc }">
                                    <span class="iconfont upwardIconfont icon-likesprogramxiangyouxiayiye"></span>
                                    <span class="iconfont downIconfont icon-likesprograma-shangyiye1"></span>
                                </div>
                            </div>
                        </div>
                        <div class="tableColumn maxColumn">
                            <div class="topicInfo">
                                题目标题
                            </div>
                        </div>
                        <div class="tableColumn">
                            题目类型
                        </div>
                        <div class="tableColumn" @click="tableSortChange('difficulty')">
                            难度
                            <div class="tableSort"
                                :class="{ 'upward': difficultySort == tableSort.asc, 'downward': difficultySort == tableSort.desc }">
                                <span class="iconfont upwardIconfont icon-likesprogramxiangyouxiayiye"></span>
                                <span class="iconfont downIconfont icon-likesprograma-shangyiye1"></span>
                            </div>
                        </div>
                        <div class="tableColumn" @click="tableSortChange('accuracy')">
                            正确率
                            <div class="tableSort"
                                :class="{ 'upward': accuracySort == tableSort.asc, 'downward': accuracySort == tableSort.desc }">
                                <span class="iconfont upwardIconfont icon-likesprogramxiangyouxiayiye"></span>
                                <span class="iconfont downIconfont icon-likesprograma-shangyiye1"></span>
                            </div>
                        </div>
                        <div class="tableColumn" @click="tableSortChange('challengeNum')">
                            <div>做题人数</div>
                            <div class="tableSort"
                                :class="{ 'upward': challengeNumSort == tableSort.asc, 'downward': challengeNumSort == tableSort.desc }">
                                <span class="iconfont upwardIconfont icon-likesprogramxiangyouxiayiye"></span>
                                <span class="iconfont downIconfont icon-likesprograma-shangyiye1"></span>
                            </div>
                        </div>
                        <div class="tableColumn">
                            <div class="topicAction" @click="showAddExercisesDialog()">
                                <span class="iconfont icon-likesprogramplus"></span>
                                添加习题
                            </div>
                        </div>
                    </div>
                    <!-- 表格行 -->
                    <div class="tableRow" v-for="(topic, index) in questionBanList" :key="index">
                        <div class="tableColumn">
                            <div class="topicId">{{ topic.exercisesId }}</div>
                        </div>
                        <div class="tableColumn maxColumn">
                            <div class="topicInfo">
                                <div class="topicName">
                                    <div v-html="topic.title" class="topicNameText"></div>
                                </div>
                                <!-- 判断是否关联课程 -->
                                <div v-if="topic.chapterInfo || (topic.knowledges && topic.knowledges.length > 0)" class="courseInfoBox">
                                    <div class="courseInfo" v-if="topic.chapterInfo">
                                        <span class="title">章节</span>
                                        <span class="chapterName"
                                            @click="openChapter(topic.chapterInfo.chapterId)">
                                            {{ topic.chapterInfo.chapterName }}
                                        </span>
                                    </div>
                                    <div class="courseInfo" v-if="topic.knowledges && topic.knowledges.length > 0">
                                        <span class="title">知识点</span>
                                        <span class="chapterName" v-for="(knowledge, index) in topic.knowledges" :key="index">
                                            {{ knowledge.knowledgeContent }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tableColumn">
                            <div class="topicType">{{ topic.questions?.length > 0 ? (topic.questionStem?.length > 0 ? '材料题' : (topic.questions.length > 1 ? '综合题' : topic.questions[0].questionType)) : '未定义'  }}</div>
                        </div>
                        <div class="tableColumn">
                            <div class="topicDifficulty" :class="getTopicDifficulty(topic.difficultyText)">{{
                                topic.difficultyText }}</div>
                        </div>
                        <div class="tableColumn">
                            <div class="topicAccuracy">{{ topic.accuracy ? topic.accuracy :'0' }}%</div>
                        </div>
                        <div class="tableColumn">
                            <div class="topicChallengeNum">{{ topic.challengeNum ? topic.challengeNum : '0' }}</div>
                        </div>
                        <div class="tableColumn">
                            <div class="topicAction" @click="showExercises(topic.exercisesId)">查看详细</div>
                        </div>
                    </div>
                </div>
                <!-- 分页 -->
                <Pagination ref="questionBanPagination"
                    style="flex-shrink: 0; display: flex; justify-content: center;"
                    v-model:currentPage="_currentPage" v-model:pageSize="_pageSize" v-model:total="_total"
                    @updateData="(courrentPage, pageSize) => { updateData(courrentPage, pageSize) }" />
            </div>
        </template>

        
        <!-- 添加题目对话框 -->
        <MessageDialog ref="addExercisesDialog">
            <template v-slot:title>
                <span>添加题目</span>
            </template>
            <template v-slot:content>
                <div class="dialogContent"><form>
                        <div class="inputBox">
                            <span>题目标题：</span>
                            <input type="text" v-model="newExercises.title" placeholder="请输入课程名称" />
                        </div>
                        <div class="inputBox">
                            <span>课程难度：</span>
                            <div class="typeBox">
                                <div class="typeItem" v-for="difficulty in difficultys"
                                    :class="{ 'select': newExercises.difficulty == difficulty.difficultyId }"
                                    :key="difficulty.difficultyId" @click="difficultyClick(difficulty)">
                                    {{ difficulty.difficultyName }}
                                </div>
                            </div>
                        </div>
                        <div class="inputBox">
                            <span>题目类型：</span>
                            <div class="selectBox">
                                <!-- 下拉框列表 -->
                                <select class="select" v-model="newExercises.dataType" aria-label="NewExercisesType">
                                    <option value="course">练习题</option>
                                    <option value="competition">竞赛题</option>
                                </select>
                                <span class="iconfont icon-likesprograma-shangyiye1"></span>
                            </div>
                        </div>
                        <div class="inputBox">
                            <span>关联章节：</span>
                            <div class="selectBox">
                                <!-- 下拉框列表 -->
                                <select class="select" v-model="newExercises.chapterId" aria-label="NewExercisesChapterId">
                                    <option :value="0">不关联章节</option>
                                    <option v-for="option in chapterList" :key="option.chapterId" :value="option.chapterId">
                                      第 {{ option.displayOrder }} 章  {{ option.chapterName }}
                                    </option>
                                </select>
                                <span class="iconfont icon-likesprograma-shangyiye1"></span>
                            </div>
                        </div>
                        <div class="inputBox">
                            <span>知识点：</span>
                            <div class="typeBox listBox slectList">
                                <div v-if="newExercises.knowledges.length <= 0">无关联知识点</div>
                                <div class="typeItem"
                                v-for="knowledge in newExercises.knowledges" :key="knowledge.recordId">
                                    {{ knowledge.knowledgeContent }}
                                </div>
                            </div>
                            <div class="button" :class="{ 'disable': false}" @click="showSelectKnowledgeDialog()"
                                >关联知识点</div>
                        </div>
                        <div class="inputBox noPadding">
                            <span>题目描述：</span>
                            <textarea type="text" v-model="newExercises.eleRemark"
                                placeholder="请输入课程描述" />
                        </div>
                    </form>
                </div>
            </template>
            <template v-slot:footer>
                <div class="dialogFooterButton" @click="closeAddExercisesDialog">
                    <span class="line">取消</span>
                </div>
                <div class="dialogFooterButton" @click="addExercises">
                    <span>确认</span>
                </div>
            </template>
        </MessageDialog>
        <!-- 选择知识点对话框 -->
        <MessageDialog ref="selectKnowledgeDialog">
            <template v-slot:title>
                <span>关联知识点</span>
            </template>
            <template v-slot:content>
                <div class="dialogContent">
                    <form>
                        <div class="selectLabel">
                            <div class="inputBox noPadding">
                                <span>所有内容：</span>
                                <div class="typeBox listBox maxType allType">
                                    <div class="typeItem" v-for="knowledge in knowledgeList"
                                        :class="{ 'select': isSelectKnowledge(knowledge) }" :key="knowledge.recordId"
                                        @click="selectKnowledge(knowledge)">
                                        {{ knowledge.knowledgeContent }}
                                    </div>
                                </div>
                            </div>
                            <div class="inputBox noPadding">
                                <span>已选择：</span>
                                <div class="typeBox listBox slectList maxType">
                                    <div class="typeItem" v-for="knowledge in preSelectKnowledge"
                                        :key="knowledge.recordId" @click="selectKnowledge(knowledge)">
                                        {{ knowledge.knowledgeContent }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </template>
            <template v-slot:footer>
                <div class="dialogFooterButton" @click="closeSelectKnowledgeDialog">
                    <span class="line">取消</span>
                </div>
                <div class="dialogFooterButton" @click="confirmSelectKnowledge">
                    <span>确认</span>
                </div>
            </template>
        </MessageDialog>
        <!-- 消息对话框 -->
        <MessageDialog ref="messageDialog">
            <template v-slot:title>
                <span>{{ messageDialogData.title }}</span>
            </template>
            <template v-slot:content>
                <div class="dialogContent">
                    <div class="messageBox" :class="messageDialogData.type">
                        <div class="message" v-for="message in messageDialogData.message">{{ message }}</div>
                    </div>
                </div>
            </template>
            <template v-slot:footer>
                <div class="dialogFooterButton" @click="closeMessage">
                    <span class="line">取消</span>
                </div>
                <div class="dialogFooterButton" @click="closeMessage">
                    <span>确认</span>
                </div>
            </template>
        </MessageDialog>
    </div>
</template>

<script lang="ts">
import { ref, watch } from 'vue';
import Pagination from '@/components/Pagination.vue';
import MessageDialog from '@/components/MessageDialog.vue';
import { useRoute, useRouter } from 'vue-router';
import { courseApi, exercisesApi } from '@/api/course/Course';
import { Chapter, Exercises, KnowledgePoint } from '@/types/Course';
import CourseContentExerciseContent from '@/components/course/CourseContentExerciseContent.vue';
// import { ElMessage } from 'element-plus';

export default {
    name: 'courseQuestionBankView'
}
const difficultys = ref([
    { difficultyId: 1, difficultyName: '简单' },
    { difficultyId: 2, difficultyName: '中等' },
    { difficultyId: 3, difficultyName: '困难' },
]);

// 消息对话框
const messageDialog = ref(null);
const messageDialogData = ref({
    title: '',
    message: [''],
    type: 'success',
});
const showMessage = (title: string, message: string[], type: string) => {
    messageDialogData.value = { title, message, type };
    messageDialog.value.ShowModal();
}
const closeMessage = () => {
    messageDialog.value.Close();
}

</script>

<script setup lang="ts">
    const router = useRouter();     // 获取路由实例
    const route = useRoute();
    const courseId = ref(); // 获取 课程Id 参数
    const chapterId = ref(); // 获取 章节Id 参数
    const knowledgeId = ref(); // 获取 章节Id 参数
    const exercisesId = ref(); // 获取 资源Id 参数

    // 章节列表
    const chapterList = ref<Chapter[]>([]);
    // 知识点列表
    const knowledgeList = ref<KnowledgePoint[]>([]);
    // 预选知识点
    const preSelectKnowledge = ref<KnowledgePoint[]>([]);

    //分页数据
    const questionBanPagination = ref();
    const _currentPage = ref(1);
    const _pageSize = ref(9);
    const _total = ref(0);
    const questionBankListTable = ref(null)
    // const height = ref(0)
    // let observer = null

    // 添加习题对话框
    const addExercisesDialog = ref();
    const newExercises = ref<Exercises>(null)
    // 显示添加习题对话框
    const showAddExercisesDialog = async () => {
        newExercises.value = {
            chapterId: 0,
            courseId: courseId.value,
            title: '',
            questionStem: '',
            exerciseType: '课程',
            difficulty: 1,
            dataType: 'course',
            knowledges: [],
            eleRemark:''
        }
        chapterList.value = (await courseApi.chapter.getList(courseId.value)).data;
        addExercisesDialog.value.ShowModal();
    }
    // 关闭添加习题对话框
    const closeAddExercisesDialog = () => {
        addExercisesDialog.value.Close();
    }
    
    // 选择难度
    const difficultyClick = (difficulty: any) => {
        newExercises.value.difficulty = difficulty.difficultyId;
    }

    // 添加习题
    const addExercises = () => {
        if (!newExercises.value.title) {
            showMessage('添加失败', ['题目标题不能为空'], 'failure');
            return;
        }
        exercisesApi.addExercises(newExercises.value).then(res => {
            if (res.code == 200) {
                showMessage('添加成功', ['添加成功'], 'success');
                router.push({
                    path: `/course/courseContent/${courseId.value}/courseQuestionBank`,
                    query: { exercisesId: res.data }
                });
            } else {
                showMessage('添加失败', [res.message], 'failure');
            }
        });
        closeAddExercisesDialog();
    }

    // 选择知识点对话框
    const selectKnowledgeDialog = ref();
    const showSelectKnowledgeDialog = async () => {
        preSelectKnowledge.value = newExercises.value.knowledges.slice();
        knowledgeList.value = (await courseApi.chapter.knowledge.getKnowledgePoint(courseId.value, null)).data;
        selectKnowledgeDialog.value.ShowModal();
    }
    const closeSelectKnowledgeDialog = () => {
        preSelectKnowledge.value = [];
        selectKnowledgeDialog.value.Close();
    }
    const isSelectKnowledge = (knowledge: KnowledgePoint) => {
        if (preSelectKnowledge.value.find(_knowledge => _knowledge.recordId === knowledge.recordId)) {
            return true;
        }
        return false;
    }
    // 选择知识点
    const selectKnowledge = (knowledge: KnowledgePoint) => {
        if (preSelectKnowledge.value.find(_knowledge => _knowledge.recordId === knowledge.recordId)) {
            // 移除
            preSelectKnowledge.value = preSelectKnowledge.value.filter(_knowledge => _knowledge.recordId !== knowledge.recordId);
            return;
        }
        preSelectKnowledge.value.push(knowledge);
    }
    // 确定选择知识点
    const confirmSelectKnowledge = () => {
        newExercises.value.knowledges = preSelectKnowledge.value.slice();
        closeSelectKnowledgeDialog();
    }

    // 题目列表
    const questionBanList = ref<Exercises[]>([]);

    // 排序
    enum tableSort {
        asc = 'ASC', // 升序
        desc = 'DESC' // 降序

    }
    enum tableSortNames {
        id = 'exercises_id', // 升序
        difficulty = 'difficulty', // 降序
        accuracy = 'accuracy', 
        challengeNum = 'challenge_num'
    }
    
    const tableSortName = ref(tableSortNames.id);
    const tableSortType = ref(tableSort.asc);
    // ID排序
    const idSort = ref(tableSort.asc);
    // 难度排序
    const difficultySort = ref(tableSort.asc);
    // 正确率排序
    const accuracySort = ref(tableSort.asc);
    // 挑战数排序
    const challengeNumSort = ref(tableSort.asc);

    // 排序改变
    const tableSortChange = (Change: String) => {
        switch (Change) {
            case 'id':
                tableSortName.value = tableSortNames.id;
                difficultySort.value = tableSort.asc;
                accuracySort.value = tableSort.asc;
                challengeNumSort.value = tableSort.asc;
                idSort.value = idSort.value == tableSort.asc ? tableSort.desc : tableSort.asc;
                tableSortType.value = idSort.value;
                break;
            case 'difficulty':
                tableSortName.value = tableSortNames.difficulty;
                idSort.value = tableSort.asc;
                accuracySort.value = tableSort.asc;
                challengeNumSort.value = tableSort.asc;
                difficultySort.value = difficultySort.value == tableSort.asc ? tableSort.desc : tableSort.asc;
                tableSortType.value = difficultySort.value;
                break;
            case 'accuracy':
                tableSortName.value = tableSortNames.accuracy;
                idSort.value = tableSort.asc;
                difficultySort.value = tableSort.asc;
                challengeNumSort.value = tableSort.asc;
                accuracySort.value = accuracySort.value == tableSort.asc ? tableSort.desc : tableSort.asc;
                tableSortType.value = accuracySort.value;
                break;
            case 'challengeNum':
                tableSortName.value = tableSortNames.challengeNum;
                idSort.value = tableSort.asc;
                difficultySort.value = tableSort.asc;
                accuracySort.value = tableSort.asc;
                challengeNumSort.value = challengeNumSort.value == tableSort.asc ? tableSort.desc : tableSort.asc;
                tableSortType.value = challengeNumSort.value;
                break;
        }
        // 获取题目列表
        // getQuestionList();
    }

    // 判断难度属性样式
    const getTopicDifficulty = (difficulty: string) => {
        switch (difficulty) {
            case '简单':
                return 'simple';
            case '中等':
                return 'medium';
            case '困难':
                return 'difficulty';
            default:
                return 'simple';
        }
    }

    // 打开章节
    const openChapter = (chapterId: number) => {
        // 跳转到章节详情页面
        router.push({
            path: `/course/courseContent/${courseId.value}/courseContentChapter`,
            query: { chapterId: chapterId }
        });
    }

    // 查看题目
    const showExercises = (exercisesId: number) => {
        router.push({
            path: `/course/courseContent/${courseId.value}/courseQuestionBank`,
            query: { exercisesId: exercisesId }
        });
    }

    let isRequesting = false; // 标记是否正在请求
    let pendingRequest: { currentPage: number, pageSize: number } | null = null; // 存储待处理的请求

    // 获取题目列表
    const updateData = (() => {
        return async (currentPage: number, pageSize: number) => {
            console.log(currentPage, pageSize);

            // 如果正在请求，存储当前请求并返回
            if (isRequesting) {
                pendingRequest = { currentPage, pageSize };
                console.log('请求正在进行，存储最新请求:', pendingRequest);
                return;
            }

            // 标记为正在请求
            isRequesting = true;

            try {
                const res = await exercisesApi.getExercises(
                    courseId.value, 
                    knowledgeId.value, 
                    currentPage, 
                    pageSize
                );

                console.log(res);
                questionBanList.value = res.list;
                console.log(res.list);
                _pageSize.value = res.pageSize;
                _total.value = res.total;

            } catch (error) {
                console.error('请求失败:', error);
            } finally {
                // 请求完成，重置标记
                isRequesting = false;

                // 检查是否有待处理的请求
                if (pendingRequest) {
                    console.log('执行待处理请求:', pendingRequest);
                    const { currentPage: pendingPage, pageSize: pendingSize } = pendingRequest;
                    pendingRequest = null; // 清空待处理请求
                    updateData(pendingPage, pendingSize); // 执行待处理请求
                }
            }
        };
    })();

    // 参数转换函数（确保字符串转换为数字）
    const parseSafeInt = (value: string | string[] | undefined): number | undefined => {
        if (typeof value === 'string') {
            const num = parseInt(value, 10);
            return isNaN(num) ? undefined : num;
        }
        return undefined;
    };
    // 监听路由变化
    watch(
        () => ({
            courseIdParam: route.params.courseId,
            chapterIdParam: route.query.chapterId,
            exercisesIdParam: route.query.exercisesId,
            knowledgeIdParam: route.query.knowledgeId
        }),
        ({ courseIdParam, chapterIdParam, exercisesIdParam, knowledgeIdParam }) => {
            // 转换并更新 courseId
            const newCourseId = parseSafeInt(courseIdParam);
            if (newCourseId !== undefined) courseId.value = newCourseId;
            // 转换并更新 chapterId
            chapterId.value = parseSafeInt(chapterIdParam);
            knowledgeId.value = parseSafeInt(knowledgeIdParam);
            exercisesId.value = parseSafeInt(exercisesIdParam);

            // 重置当前页码
            _currentPage.value = 1;

            questionBanPagination?.value?.UpdateDates();
        },
        { immediate: true }
    );

    // 提交题目
    const submitExercises = async () => {
        updateData(_currentPage.value, _pageSize.value);
    }
    
    // onMounted(() => {
    //   observer = new ResizeObserver((entries) => {
    //     for (let entry of entries) {
    //       height.value = entry.contentRect.height
    //       _pageSize.value = Math.floor(height.value / 85);
    //     }
    //   })
      
    //   if (questionBankListTable.value) {
    //     observer.observe(questionBankListTable.value)
    //   }
    // })

    // onBeforeUnmount(() => {
    //   if (observer && questionBankListTable.value) {
    //     observer.unobserve(questionBankListTable.value)
    //   }
    // })
</script>

<style src="@/assets/icons/iconfont.css" scoped></style>

<style scoped>
.courseQuestionBankView {
    width: 100%;
    height: 100%;
}

/* 题库列表内容 */
.questionBankListContent {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 15px;
    justify-content: center;
    align-items: center;
    gap: 15px;
    /* background-color: aqua; */
}

/* 题库列表表格 */
.questionBankListContent .questionBankListTable {
    flex: 1;
    width: 100%;
    min-height: 0px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    -moz-backdrop-filter: blur(2rem);
    -ms-backdrop-filter: blur(2rem);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
    overflow: hidden;
    overflow-y: auto;
}

/* 表格头部 */
.questionBankListContent .questionBankListTable .tableHeader {
    font-size: 16px;
    height: 45px;
    font-weight: bold;
}
.questionBankListContent .questionBankListTable .tableHeader .tableColumn .topicAction {
    font-weight: lighter;
    font-size: 14px;
}.questionBankListContent .questionBankListTable .tableHeader .tableColumn .topicAction .iconfont {
    font-size: 16px;
}

/* 表格行 */
.questionBankListContent .questionBankListTable .tableHeader,
.questionBankListContent .questionBankListTable .tableRow {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .3s all;
}
.questionBankListContent .questionBankListTable .tableRow {
    min-height: 85px;
}

/* 表格列 */
.questionBankListContent .questionBankListTable .tableColumn {
    min-width: 120px;
    padding: 15px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.questionBankListContent .questionBankListTable .tableColumn.maxColumn {
    width: 100%;
    justify-content: flex-start;
}

.questionBankListContent .questionBankListTable .tableRow:hover {
    background-color: rgba(200, 200, 200, .2);
}

/* 表格排序 */
.tableSort {
    width: 20px;
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.tableSort .iconfont {
    font-size: 12px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(200, 200, 200, 1);
    /* 旋转 */
    transform: rotate(-90deg);
    cursor: pointer;
}

.tableSort.upward .upwardIconfont {
    color: rgba(65, 185, 255, 1);
}

.tableSort.downward .downIconfont {
    color: rgba(65, 185, 255, 1);
}

/* 题目Id */
.topicId {
    width: 100%;
    padding: 0px 20px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 题目消息 */
.topicInfo {
    width: 100%;
}

/* 题目名称 */
.topicInfo .topicName {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 题目 完成图标 */
.topicInfo .topicName .iconfont {
    font-size: 20px;
    margin-right: 10px;
    color: rgba(100, 100, 100, .5);
}

.topicInfo .topicName .iconfont.wrong {
    color: rgba(246, 70, 0, 1);
}

.topicInfo .topicName .iconfont.success {
    color: rgba(65, 185, 255, 1);
}

/* 题目名称文本 */
.topicInfo .topicName .topicNameText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 题目课程信息 */
.topicInfo .courseInfoBox {
    font-size: 14px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.topicInfo .courseInfoBox .courseInfo {
    margin-right: 20px;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 信息标题 */
.topicInfo .courseInfoBox .title {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 信息内容 */
.topicInfo .courseInfoBox .competition,
.topicInfo .courseInfoBox .courseInfo .courseName,
.topicInfo .courseInfoBox .courseInfo .chapterName {
    border-radius: 25px;
    padding: 2px 10px;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(65, 185, 255, 1);
}

/* 题目难度 */
.topicDifficulty {
    font-size: 12px;
    color: rgba(255, 255, 255, 1);
    padding: 2px 10px;
    border-radius: 25px;
}

.topicDifficulty.simple {
    background-color: rgba(8, 191, 145, 1);
}

.topicDifficulty.medium {
    background-color: rgba(250, 172, 43, 1);
}

.topicDifficulty.difficulty {
    background-color: rgba(246, 70, 0, 1);
}

/* 题目类型 */
.topicType,
/* 题目正确率 */
.topicAccuracy,
/* 挑战次数 */
.topicChallengeNum {
    font-size: 14px;
}

/* 操作 */
.topicAction {
    padding: 5px 10px;
    font-size: 14px;
    background-color: rgba(65, 185, 255, 1);
    color: rgba(255, 255, 255, 1);
    border-radius: 50px;
    transition: .3s all;
    cursor: pointer;
}

.topicInfo .courseInfoBox .courseInfo .courseName:hover,
.topicInfo .courseInfoBox .courseInfo .chapterName:hover,
.topicAction:hover {
    background-color: rgba(65, 185, 255, .8);
}

.topicInfo .courseInfoBox .courseInfo .courseName:active,
.topicInfo .courseInfoBox .courseInfo .chapterName:active,
.topicAction:active {
    background-color: rgba(65, 185, 255, .65);
    transition: .1s all;
}

/* 编辑课程对话框 */
.dialogContent form {
    width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.dialogContent form .inputBox {
    width: 550px;
    padding: 10px 0px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dialogContent form .inputBox.noPadding {
    padding: 10px 0px;
    align-items: flex-start;
}

/* 输入框 */
.dialogContent form .inputBox span {
    min-width: 80px;
}

.dialogContent form .inputBox input,
.dialogContent form .inputBox textarea {
    width: 100%;
    height: 35px;
    font-size: 16px;
    border: 2px solid rgba(200, 200, 200, 1);
    border-radius: 5px;
    padding: 0px 10px;
    outline: none;
}

.dialogContent form .inputBox.noPadding textarea {
    height: 100px;
    resize: none;
    /* 禁止调整大小 */
    padding: 3px 10px;
    line-height: 28px;
}

.dialogContent form .inputBox input:focus,
.dialogContent form .inputBox textarea:focus {
    border: 2px solid rgba(65, 185, 255, 1);
}

.dialogContent form .inputBox input,
.dialogContent form .inputBox .typeBox {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    padding: 0px 10px;
    outline: none;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.dialogContent form .inputBox .selectBox,
.dialogContent form .inputBox input {
    height: 35px;
    border: 2px solid rgba(200, 200, 200, 1);
}

.dialogContent form .inputBox .typeBox {
    min-height: 40px;
    max-height: 80px;
    resize: none;
    /* 禁止调整大小 */
    padding: 3px 10px;
    line-height: 28px;
}

.dialogContent form .inputBox .typeBox.maxType {
    max-height: 250px;
}

.dialogContent form .inputBox .typeBox.slectList {
    max-height: 150px;
}

.dialogContent form .inputBox input:focus {
    border: 2px solid rgba(65, 185, 255, 1);
}

.dialogContent form .inputBox .listBox {
    border: 2px solid rgba(200, 200, 200, 1);
}

/* 列表 */
.dialogContent form .inputBox .typeBox .typeItem {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 单行溢出省略 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px;
    height: 30px;
    font-size: 14px;
    border-radius: 10px;
    border: 2px solid rgba(200, 200, 200, 1);
}

.dialogContent form .inputBox .typeBox.slectList .typeItem {
    color: rgba(65, 185, 255, 1);
    border: 2px solid rgba(65, 185, 255, 1);
}

.dialogContent form .inputBox .typeBox .typeItem:hover {
    color: rgba(65, 185, 255, 1);
    border: 2px solid rgba(65, 185, 255, 1);
}

.dialogContent form .inputBox .typeBox .typeItem.select {
    color: rgb(255, 255, 255);
    border: 2px solid rgba(65, 185, 255, 1);
    background: rgba(65, 185, 255, 1);
}

/* 表单按钮 */
.dialogContent form .inputBox .button {
    min-width: 100px;
    height: 35px;
    overflow: hidden;
    border-radius: 5px;
    margin-left: 10px;
    transition: .3s all;
    display: flex;
    justify-content: center;
    align-items: center;
    color: aliceblue;
    background-color: rgba(65, 185, 255, 1);
}

/* 表单按钮 */
.dialogContent form .inputBox .button:hover {
    background-color: rgba(65, 185, 255, 0.8);
}

.dialogContent form .inputBox .button:active {
    transition: .1s all;
    background-color: rgba(65, 185, 255, 1);
}

/* 禁用按钮 */
.dialogContent form .inputBox .button.disable {
    color: aliceblue;
    background-color: rgba(180, 180, 180, 1);
}

.dialogContent form .inputBox .button.disable:hover {
    background-color: rgba(180, 180, 180, 0.8);
}

.dialogContent form .inputBox .button.disable:active {
    transition: .1s all;
    background-color: rgba(180, 180, 180, 1);
}

/* 下拉框 */
.dialogContent form .inputBox .selectBox {
    width: 100%;
    border-radius: 5px;
    font-size: 16px;
    padding: 0px 0px;
    color: #333;
    outline: none;
    position: relative;
    cursor: pointer;
    display: flex;
    background-color: rgba(0, 0, 0, 0);
    justify-content: space-between;
    transition: .3s all;
}
.dialogContent form .inputBox .selectBox:focus-within {
    border: 2px solid rgba(65, 185, 255, 1);
}
.dialogContent form .inputBox .selectBox:focus-within .iconfont {
    color: rgba(65, 185, 255, 1);
}
.dialogContent form .inputBox .selectBox .select {
    width: 100%;
    padding: 0px 10px;
    padding-right: 35px;
    border: 0px solid #ccc;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0);
    font-size: 14px;
    position: relative;
    z-index: 1;
    color: #333;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.dialogContent form .inputBox .selectBox .iconfont {
    width: 30px;
    min-width: 0px;
    font-size: 20px;
    position: absolute;
    right: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-90deg);
    transition: .3s all;
    color: rgba(100, 100, 100, 1);
}

/* 对话框底部按钮 */
.dialogFooterButton {
    width: 100%;
    height: 65px;
    position: relative;
    display: flex;
    color: rgba(65, 185, 255, 1);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .3s all;
}

.dialogFooterButton:hover {
    background-color: rgba(200, 200, 200, .15);
}

.dialogFooterButton:active {
    transition: .1s all;
    background-color: rgba(220, 220, 220, .1);
}

.dialogFooterButton .line {
    width: 100%;
    border-right: 1px solid rgba(200, 200, 200, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.messageBox {
    padding: 10px;
}

.messageBox.success {
    color: rgba(65, 185, 255, 1);
}

.messageBox.failure {
    color: rgba(255, 0, 0, 1);
}
</style>